<template>
  <div class="page-container" style="text-align: center;" @touchmove.prevent >
    <div id="loading-panel">
      <h1><strong>Loading...</strong></h1>
      <h2><strong>{{percent}}</strong></h2>
    </div>
  </div>
</template>

<script>
let imgs = [
  'http://h5static.weiyoho.com/assets/picture/hua-text1.png',
  'http://h5static.weiyoho.com/assets/picture/hua-text2.png',
  'http://h5static.weiyoho.com/assets/picture/hua-text3.png',
  'http://h5static.weiyoho.com/assets/picture/hua-text4.png',
  'http://h5static.weiyoho.com/assets/picture/hua-text5.png',
  'http://h5static.weiyoho.com/assets/picture/hua-text6.png',
  'http://h5static.weiyoho.com/assets/bg-pink.png',
  'http://h5static.weiyoho.com/assets/calendar/zero.png',
  'http://h5static.weiyoho.com/assets/calendar/first.png',
  'http://h5static.weiyoho.com/assets/calendar/second.png',
  'http://h5static.weiyoho.com/assets/calendar/third.png',
  'http://h5static.weiyoho.com/assets/calendar/suitable-0.png',
  'http://h5static.weiyoho.com/assets/calendar/suitable-1.png',
  'http://h5static.weiyoho.com/assets/calendar/suitable-2.png',
  'http://h5static.weiyoho.com/assets/calendar/suitable-3.png',
  'http://h5static.weiyoho.com/assets/calendar/text.png',
  'http://h5static.weiyoho.com/assets/calendar/li-text1.png',
  'http://h5static.weiyoho.com/assets/calendar/li-text2.png',
  'http://h5static.weiyoho.com/assets/calendar/li-text3.png',
  'http://h5static.weiyoho.com/assets/calendar/li-text4.png',
  'http://h5static.weiyoho.com/assets/calendar/li-text5.png',
  'http://h5static.weiyoho.com/assets/calendar/li-text6.png',
  'http://h5static.weiyoho.com/assets/calendar/li-text7.png',
  'http://h5static.weiyoho.com/assets/card1.png',
  'http://h5static.weiyoho.com/assets/card2.png',
  'http://h5static.weiyoho.com/assets/card3.png',
  'http://h5static.weiyoho.com/assets/bg-red.png',
  'http://h5static.weiyoho.com/assets/picture/carp-building.png',
  'http://h5static.weiyoho.com/assets/picture/lion-building.png',
  'http://h5static.weiyoho.com/assets/picture/ingot-building.png',
  'http://h5static.weiyoho.com/assets/picture/carp.png',
  'http://h5static.weiyoho.com/assets/picture/lion.png',
  'http://h5static.weiyoho.com/assets/picture/ingot.png',
  'http://h5static.weiyoho.com/assets/picture/carp-clothes.png',
  'http://h5static.weiyoho.com/assets/picture/lion-clothes.png',
  'http://h5static.weiyoho.com/assets/picture/ingot-clothes.png',
  'http://h5static.weiyoho.com/assets/picture/carp-water.png',
  'http://h5static.weiyoho.com/assets/picture/lion-cloud.png',
  'http://h5static.weiyoho.com/assets/picture/ingot-sea.png',
  'http://h5static.weiyoho.com/assets/picture/logo.png',
  'http://h5static.weiyoho.com/assets/picture/text-box.png',
  'http://h5static.weiyoho.com/assets/theme/cloud-left-top.png',
  'http://h5static.weiyoho.com/assets/theme/cloud-right-top.png',
  'http://h5static.weiyoho.com/assets/theme/cloud-left-down.png',
  'http://h5static.weiyoho.com/assets/theme/cloud-right-down.png',
  'http://h5static.weiyoho.com/assets/theme/right-door-god.png',
  'http://h5static.weiyoho.com/assets/theme/left-door-god.png',
  'http://h5static.weiyoho.com/assets/theme/left-door.png',
  'http://h5static.weiyoho.com/assets/theme/right-door.png',
  'http://h5static.weiyoho.com/assets/theme/picture-scroll.png',
  'http://h5static.weiyoho.com/assets/theme/button.png'
]

 import {
    Image
  } from "vant";

export default {
  data() {
    return {
      count: 0,
      percent: ''
    }
  },
  mounted: function() {
    this.preload()
  },
  methods: {
    preload: function() {
      for (let img of imgs) {
        let image = new Image()
        image.src = img
        image.onload = () => {
          this.count++
          // 计算图片加载的百分数，绑定到percent变量
          let percentNum = Math.floor((this.count / imgs.length) * 100)
          this.percent = `${percentNum}%`
        }
      }
    }
  },

  watch: {
    count: function(val) {
      // console.log(val)
      if (val === imgs.length) {
        // 图片加载完成后跳转页面
        this.$router.replace({ path: 'theme' })
      }
    }
  }
}
</script>
